<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--按钮
我们一般都会结合js来实现按钮的动作


-->
<button>Press me</button>

<!--form： 表示这是一个表单 表单的作用用来提交到服务器（地址）
  包含所有的表单元素
  action：提交的地址
  method：提交的方式 get post



  HTML中所有的地址在没有确定时 用#替代

-->
<form action="#" method="get">
<!--  可以将表单分组-->
  <fieldset>
<!--   对各个分组的说明-->
    <legend>图例</legend>

  <h2>Subscribe to our newsletter</h2>
  <p>

<!--    input标签-->
    <!--    提示语 扩大选中范围
        使用第一种方式：需要保证label标签中的for属性和input标签中的id属性保持一致 才能生效
        使用第二种方式：只要将label标签包裹住input标签即可
        -->
    <!--    <label for="name">Name (required):</label>-->
    <label>用户名：<input type="text" name="name" id="name" required /></label>
  </p>
  <p>
    <label for="email">Email (required):</label>
    <input type="email" name="email" id="email" required />
  </p>
  <p>
<!--    button 默认的效果是提交 如果就想让button作为一个纯按钮 需要将type写成button-->
    <button type="submit">Sign me up!</button>
<!--    <button type="button">Sign me up!</button>-->
    <button type="reset">重置</button>
  </p>
  </fieldset>
</form>

<!--输入元素
  type：类型 比如text（文本） 单选（radio） 多选（checkbox） ....
  name: 将来提交到后端时，提交的参数名称
  http://localhost:8080/goods/getOne?name=zhangsan

  required: 校验用的 必填项
  value: 就是表单中的值
  placeholder： 用来提示你要写的内容
-->
文本：<input type="text" name="name"  value="zhangsan" placeholder="请填写文本" required disabled/> <br><br>

密码框：<input type="password" > <br><br>

<!--checked: 表示默认选中
disabled: 禁用 不可点
需要有一个value值
-->
单选框：<input type="radio"> <br>
<label>男：<input type="radio" name="gender" value="男"></label>
女：<input type="radio" name="gender" value="女" checked disabled>


多选框：
<!--需要一个value值-->
<input type="checkbox" name="" value="足球"> 足球
<input type="checkbox" name="" value="看球"> 篮球

颜色控件：
<input type="color">

范围控件：
<input type="range">

邮箱控件：
<input type="email">

数字控件：
<input type="number">

下拉框控件：
<!--必须要写value属性值 后端接收的是前端传递过来的value值-->
<select>
  <option value="北京">北京</option>
  <option value="天津" selected>天津</option>
</select>

<!--文本域中不用放东西-->
<textarea name="" id="" cols="30" rows="10"></textarea>

按钮：
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">



</body>
</html>